<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>好名好运AI</h1>
          <el-menu mode="horizontal" router class="nav-menu">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/name-generator">取名</el-menu-item>
            <el-menu-item index="/history">历史记录</el-menu-item>
            <el-menu-item index="/favorites">收藏</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      
      <el-main>
        <div class="welcome-section">
          <div class="welcome-content">
            <h2>欢迎使用好名好运AI</h2>
            <p>基于AI技术，为您提供专业的中国起名服务</p>
            <el-button type="primary" size="large" @click="$router.push('/name-generator')">
              开始取名
            </el-button>
          </div>
        </div>

        <div class="features-section container">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><User /></el-icon>
                    <span>多胞胎支持</span>
                  </div>
                </template>
                <p>支持双胞胎、三胞胎等多胞胎起名，确保名字之间和谐统一，寓意相近</p>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><Calendar /></el-icon>
                    <span>五行分析</span>
                  </div>
                </template>
                <p>基于出生日期进行五行分析，确保名字与生辰八字相配</p>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><Star /></el-icon>
                    <span>生肖搭配</span>
                  </div>
                </template>
                <p>结合生肖特征，选择吉祥如意的名字</p>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><Magic /></el-icon>
                    <span>音韵美感</span>
                  </div>
                </template>
                <p>注重名字的音韵和谐，确保朗朗上口</p>
              </el-card>
            </el-col>
          </el-row>
          
          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><Female /></el-icon>
                    <span>性别匹配</span>
                  </div>
                </template>
                <p>生成的名字将根据性别调整，提供符合男孩或女孩的名字风格</p>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><DeleteFilled /></el-icon>
                    <span>忌讳字词</span>
                  </div>
                </template>
                <p>支持设置需要避开的特定汉字，满足家族传统、个人喜好或文化习俗的需求</p>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><InfoFilled /></el-icon>
                    <span>数据安全</span>
                  </div>
                </template>
                <p>所有数据（包括历史记录和收藏名字）均存储在您的浏览器本地，不会上传到服务器，保障您的隐私安全</p>
              </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
              <el-card>
                <template #header>
                  <div class="card-header">
                    <el-icon><CPU /></el-icon>
                    <span>多种大模型支持</span>
                  </div>
                </template>
                <p>支持多种AI大语言模型，包括DeepSeek、火山引擎等，可选择不同模型生成更多样化的名字</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <Footer />
    </el-container>
  </div>
</template>

<script setup>
import { Calendar, Star, User, InfoFilled, DeleteFilled, Female } from '@element-plus/icons-vue'
import { MagicStick as Magic } from '@element-plus/icons-vue'
import { Cpu as CPU } from '@element-plus/icons-vue'
import Footer from '../components/Footer.vue'
</script>

<style scoped>
.home {
  min-height: 100vh;
  width: 100%;
}

.el-container {
  min-height: 100vh;
}

.el-header {
  background-color: #fff;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: auto;
  min-height: 60px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.el-header h1 {
  margin: 0;
  font-size: 24px;
  color: #409EFF;
  white-space: nowrap;
}

.nav-menu {
  border-bottom: none;
  height: 60px;
  background-color: #fff !important;
}

:deep(.el-menu--horizontal) {
  border-bottom: none !important;
}

:deep(.el-menu-item) {
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  color: #2c3e50;
}

:deep(.el-menu-item.is-active) {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

:deep(.el-menu-item:hover) {
  color: #409EFF;
  background-color: transparent;
}

.welcome-section {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  margin-bottom: 40px;
}

.welcome-content {
  max-width: 800px;
  margin: 0 auto;
}

.welcome-section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #2c3e50;
}

.welcome-section p {
  font-size: 1.2em;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: #5a6a7f;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.features-section {
  padding: 40px 0;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}

.el-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
  height: 100%;
}

.el-card:hover {
  transform: translateY(-5px);
}

.el-card p {
  color: #5a6a7f;
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .header-content {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  .el-header h1 {
    margin-bottom: 10px;
  }

  .nav-menu {
    width: 100%;
    justify-content: center;
  }

  .welcome-section {
    padding: 40px 15px;
  }

  .welcome-section h2 {
    font-size: 1.8em;
  }

  .welcome-section p {
    font-size: 1em;
  }

  .features-section {
    padding: 20px 0;
  }

  .container {
    padding: 0 10px;
  }
}
</style> 